<!-- 目录 -->
<template>
    <div class="outer" @scroll="handleScroll">
        <div class="l-list topHead">
            <div class="input">
                <input readonly type="text" value="目录名称">
            </div>
            <div class="price">
                <input readonly type="text" value="资费（元）">
            </div>
            <div class="check">
                <span>试读</span>
            </div>
            <div class="sort" @click="getSort">
                排序
                <div>
                    <i :style="{ color: sort == 'up' ? '' : ' #ccc' }" class="el-icon-caret-top"></i>
                    <i :style="{ color: sort == 'down' ? '' : ' #ccc' }" class="el-icon-caret-bottom"></i>
                </div>
            </div>
            <div class="operate">
                <span>操作</span>
            </div>
        </div>
        <div class="l-list add">
            <div class="input">
                <input type="text" placeholder="请输入目录名称" v-model="title">
            </div>
            <div class="price">
                <input type="text" placeholder="0.00" v-model="price">
            </div>
            <div class="check">
                <el-checkbox v-model="checked"></el-checkbox>
            </div>
            <div class="sort">
                <input type="text" v-model="value2">
            </div>
            <div class="operate">
                <span @click="additem">添加</span>
            </div>
        </div>
        <div style="padding-bottom: 98px;">
            <div class="l-list" v-for="item in list" :key="item.id">
                <div class="input">
                    <input @blur="handleBlur(item)" type="text" v-model="item.title">
                </div>
                <div class="price">
                    <input @blur="handleBlur(item)" type="text" v-model="item.price">
                </div>
                <div class="check">
                    <el-checkbox @change="change(item)" v-model="item.is_try"></el-checkbox>
                </div>
                <div class="sort">
                    <input @blur="handleBlur(item)" type="text" v-model="item.list_order">
                </div>
                <div class="operate">
                    <span @click="goPage('/columnPost/List', item.id)">{{ readOnly ? '编辑' : '保存' }}</span>
                    <span @click="is_on(item.id, 1)" v-if="item.status == 2">上架</span>
                    <span @click="is_on(item.id, 2)" v-if="item.status == 1">下架</span>
                    <el-popconfirm @confirm="confirm(item.id)" icon="el-icon-info" icon-color="red" title="确定删除该条目录吗？">
                        <span slot="reference">删除</span>
                    </el-popconfirm>
                </div>
            </div>
        </div>
        <div class="bottom" v-loading="loading"></div>
    </div>
</template>
<script>

export default {
    data() {
        return {
            title: '',
            loading: false,
            price: 0,
            checked: false,
            readOnly: true,
            checked1: false,
            value1: '',
            value2: 0,
            value3: 1,
            sort: 'down',
            cid: 0,// 专栏id
            list: [],
            totalPage: 1,
            pageNum: 1,
        }
    },

    mounted() {
        let id = parseInt(this.$route.query.id)
        if (id) {
            this.cid = id
            this.getList()
        }
    },
    methods: {

        handleScroll(event) {

            const { scrollTop, scrollHeight, clientHeight } = event.target;
            if (scrollTop + clientHeight >= scrollHeight) {
                console.log('滚动到底部了！');
                // this.$message({
                //     message: '到底了',
                //     type: 'info'
                // })
                this.scrollBottom()
            }
        },
        //滚到底部的分页
        scrollBottom() {
            var page = this.pageNum
            //如果请求未结束就返回不连续请求
            if (this.loading) {
                return
            }
            //数据请求完成无更多数据时
            if (page >= this.totalPage) {
                return false;
            }
            page = parseInt(page) + 1
            this.pageNum = page
            this.getList()
        },

        // 专栏列表
        getList() {
            this.loading = true

            let params = {
                id: this.cid,
                sort: this.sort == 'down' ? 0 : 1,
                page: this.pageNum
            }

            this.$api.getChapter(params).then(res => {
                if (res.data.code == 1) {
                    this.totalPage = res.data.data.last_page
                    this.list = this.list.concat(res.data.data.data);
                    this.loading = false
                }

            })
        },
        goPage(url, id) {
            this.$router.push({
                path: url,
                query: {
                    id
                }
            })
        },

        //添加条目
        additem() {
            console.log('add');
            let params = {
                title: this.title,
                price: this.price,
                is_try: this.checked ? 1 : 2,
                col_id: this.cid,
                list_order: this.value2
            }
            this.$api.addChapter(params).then(res => {
                if (res.data.code == 1) {
                    let id = res.data.data
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })

                    this.pageNum = 1
                    this.title = ''
                    this.price = 0
                    this.checked = false
                    this.value2 = 0
                    this.list = []
                    this.getList()

                }
            })

        },
        // 调整目录的上下架
        is_on(id, status) {
            let params = {
                id, status
            }
            this.$api.setChapter(params).then(res => {
                if (res.data.code == 1) {
                    let id = res.data.data
                    this.$message.closeAll()

                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })

                    this.pageNum = 1
                    this.list = []
                    this.getList()

                }
            })
        },
        //确认删除
        confirm(id) {
            let params = {
                id
            }
            this.$api.delChapter(params).then(res => {
                if (res.data.code == 1) {
                    let id = res.data.data
                    this.$message.closeAll()

                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })

                    this.pageNum = 1
                    this.list = []
                    this.getList()

                }
            })
        },
        //input失焦
        handleBlur(item) {
            let params = {
                id: item.id,
                title: item.title,
                col_id: item.col_id,
                price: item.price,
                is_try: item.is_try ? 1 : 2,
                list_order: item.list_order
            }
            this.$api.chapterEdit(params).then(res => {
                if (res.data.code == 1) {
                    this.$message.closeAll()

                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })


                } else {
                    this.pageNum = 1
                    this.list = []
                    this.getList()
                }
            })


        },
        // 勾选试读
        change(item) {
            this.handleBlur(item)
        },
        //排序
        getSort() {
            if (this.sort == 'down') {
                this.sort = 'up'
            } else {
                this.sort = 'down'
            }
            this.list = []
            this.pageNum = 1
            this.getList()
        },
    }
}
</script>
<style lang="scss" scoped>
.outer {
    padding-left: 2.81rem;
    padding-right: 2px;
    height: 100%;
    overflow-y: auto;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 0 !important;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 0 !important;
    }
}

.topHead {
    border-bottom: 0.05rem solid #E5E5E5 !important;
    position: sticky;
    top: 0rem;
    background-color: #fff;
    z-index: 22;

    .operate {
        display: flex;
        justify-content: center !important;
    }
}

.l-list {
    width: 100%;
    display: flex;
    height: 3.12rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 0.05rem dashed #E5E5E5;

    >div {
        display: flex;
        align-items: center;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 1rem;
        color: #333333;
        height: 100%;

        box-sizing: border-box;
    }

    input {
        outline: none;
        height: 100%;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 1rem;
        color: #333333;
        width: 100%;
        border: none;
        text-align: center;

    }

    .input {
        width: 33.85rem;

        input {
            text-align: left;
        }
    }

    .price {
        width: 4.63rem;

        input {
            text-align: center;

        }
    }

    .check {
        width: 2.08rem;
        display: flex;
        justify-content: center;
    }

    .sort {
        width: 3.4rem;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        >div {
            margin-left: 0.2rem;
            display: flex;
            flex-direction: column;

            i {
                &:first-child {
                    margin-bottom: -0.5rem;
                }
            }
        }
    }

    .operate {
        width: 8.33rem;
        justify-content: space-between;

        span {
            font-size: 16px;

            cursor: pointer;
        }
    }
}

.add {
    background-color: #fff;
    position: sticky;
    top: 3.12rem;
    z-index: 22;

    .operate {
        justify-content: center !important;
    }
}
</style>